<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main1" style="width: 1000px; height: 500px; margin: 0 auto;"></div>
<div id="main2" style="width: 1000px; height: 500px; margin: 0 auto;"></div>
<div id="main3" style="width: 1000px; height: 500px; margin: 0 auto;"></div>
</body>
<script src="static/echarts.min.js"></script>
<script>
    var dataArr1 = [[{%for i in data1%}'{{i.fld_brand_name}}', {%endfor%}],[{%for i in data1%}{{i.fld_sale_count}}, {%endfor%}]]

    var dataArr2 = [{%for i in data2%}{'name':'{{i.fld_phone_color}}','value':{{i.fld_sale_count}}}, {%endfor%}]

    var dataArr3 = [[{%for i in data3%}'{{i.fld_phone_size}}', {%endfor%}],[{%for i in data3%}{{i.fld_sale_count}}, {%endfor%}]]

    window.onload=function(){
        initEcharts(dataArr1, dataArr2, dataArr3, document.getElementById('main1'), document.getElementById('main2'), document.getElementById('main3'));
    }

    function initEcharts(data1, data2, data3, dom1, dom2, dom3){
        console.log(data1)
        console.log(data2)
        console.log(data3)
        console.log(data1[0])
        console.log(data3[0])
        echarts.init(dom1).setOption({
            title:{
                text:'手机的品牌对销量的影响'
            },
            legend:{
                orient:'vertical',
                right:"50"
            },
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'cross'
                }
            },
            xAxis:{
                data:data1[0],
                name:'品牌',
                axisLabel:{
                    rotate:40,
                    interval:0

                }
            },
            grid:{
                bottom:'20%'
            },
            yAxis:{
                name:'数量'
            },
            series:[{
                name:"数量",
                type:'bar',
                data:data1[1]
                }
            ]
        });
        echarts.init(dom2).setOption({
              title:{
                text:'手机的颜色对销量的影响'
            },
            tooltip:{
                tirgger:'tiem',
                formatter:'{a}<br>{b} ：{c} ({d})%'
            },
            legend:{
                type: 'scroll',
                 orient: 'vertical',
                 right: 10,
            },
            series:[{
                name:'销量',
                type:'pie',
                data:data2,
                radius: '60%',
                label : {
                    normal: {
                        formatter: '{b}:{c}: ({d}%)',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 15
                        }
                    }
                }
                }
            ]
        });
         echarts.init(dom3).setOption({
             title:{
                text:'手机的尺寸对销量的影响'
            },
             legend:{
                 orient:'vertical',
                 right:"20"
             },
             tooltip:{
                trigger:'axis',
                 formatter:'{b} {a}: {c}',
                 axisPointer:{
                    type:'cross'
                 }
            },
            xAxis:{
                 name:'尺寸',
                  data:data3[0],
                axisLabel:{
                      rotate:10
                }
            },
            yAxis:{
                 name:'销量'
            },
            series:[{
                 name:"销量",
                type: 'line',
                data: data3[1]
            }]
        })

    }
</script>
</html>